<template>
	<!-- 实名认证 -->
	<view class="realname-container">
		<!-- 自定义导航栏 -->
		<MyHeader>
			<template #title>
				<view>实名认证</view>
			</template>
		</MyHeader>

		<!-- 背景图 -->
		<view class="bg">
			<image src="/static/img/register_login/login_bg.png" mode="widthFix"></image>
		</view>

		<!-- 大标题 -->
		<view class="big-title">实名认证</view>

		<!-- 表单区 -->
		<view class="wrap">
			<u--form labelPosition="left" :model="model" :rules="rules" ref="realName" labelWidth="162rpx" :labelStyle="{fontSize: '28rpx',
fontFamily: 'Source Han Sans CN-Medium, Source Han Sans CN',
fontWeight: 500,
color: '#333333',
lineHeight: '28rpx',
letterSpacing: '1px'}">
				<u-form-item label="姓名" prop="name" borderBottom ref="item1">
					<u--input v-model="model.name" border="none" placeholder="请输入姓名"></u--input>
				</u-form-item>
				<u-form-item label="身份证号" prop="id_card" borderBottom ref="item1">
					<u--input v-model="model.id_card" border="none" placeholder="请输入身份证号"></u--input>
				</u-form-item>
			</u--form>
		</view>

		<!-- 底部按钮 -->
		<BottomButton @setHandleBtn="getHandleBtn">
			<template>
				<view>提交</view>
			</template>
		</BottomButton>
	</view>
</template>

<script>
	import MyHeader from '@/componets/MyHeader/MyHeader'
	import BottomButton from '@/componets/BottomButton/BottomButton.vue'
	export default {
		data() {
			return {

				// 实名认证信息
				model: {
					name: '',
					id_card: ''
				},

				// 实名认证规则
				rules: {
					'name': [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}, {
						pattern: /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请正确填写姓名'
					}],
					'id_card': [{
						type: 'string',
						required: true,
						message: '请填写身份证号',
						trigger: ['blur', 'change']
					}, {
						pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请正确填写身份证号'
					}]
				},

				// 注册信息
				reg: {}
			}
		},
		methods: {

			/**
			 * 点击提交
			 */
			getHandleBtn() {
				// 验证实名认证规则
				this.$refs.realName.validate().then(res => {
					// 先提交注册信息
					this.$request.post({
						url: '/api/register',
						data: this.reg,
						success: res => {
							if (res.code != 200) return uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							// 提交实名认证信息
							this.$request.post({
								url: '/api/users/authentication',
								data: {
									name: this.model.name,
									id_card: this.model.id_card
								},
								success: res => {
									if (res.code != 200) return uni.showToast({
										title: res.msg,
										icon: 'none'
									})
									this.getUserInfo()
								}
							})
						}
					})
				})
			},

			/**
			 * 获取最新用户信息
			 */
			getUserInfo() {
				this.$request.post({
					url: '/api/users/getUserInfo',
					success: res => {
						if (res.code != 200) return uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						uni.setStorageSync('user_data', res.result.data)
						uni.reLaunch({
							url: '/pages/collegeAccreditation/collegeAccreditation'
						})
					}
				})
			}
		},
		onLoad(options) {
			if (!options.reg) return uni.navigateBack()
			this.reg = JSON.parse(options.reg)
			this.model.name = this.reg.name
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.realName.setRules(this.rules)
		},
		components: {
			MyHeader,
			BottomButton
		}
	}
</script>

<style lang="less" scoped>
	.realname-container {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		overflow: hidden;
		position: relative;
		z-index: 9;
		padding-bottom: 258rpx;
		box-sizing: border-box;

		.bg {
			width: 100%;
			position: absolute;
			top: 0;
			z-index: -1;

			>image {
				width: 100%;
			}
		}

		.big-title {
			font-size: 48rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #333333;
			line-height: 70rpx;
			margin-top: 80rpx;
			margin-left: 40rpx;
		}

		.wrap {
			width: 100%;
			box-sizing: border-box;
			margin-top: 94rpx;

			/deep/.u-form-item {
				width: calc(100% - 80rpx);
				margin: 0 40rpx;
			}

			.place {
				color: #c0c4cc;
				font-size: 30rpx;
				line-height: 52rpx;
			}

			.txt {
				color: #303133;
				font-size: 30rpx;
				line-height: 52rpx;
			}
		}
	}
</style>